<template>
  <div class="container">
    <template>
      <el-table
        :data="tableData"
        style="width:90%;height:50%;margin-left:20px"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        }
      ],
    };
  },
  methods: {
    tableRowClassName({rowIndex}) {
        if (rowIndex === 1) {
            return 'warning-row';
        } else if (rowIndex === 3) {
            return 'success-row';
        }
        return 'danger-row';
    //   switch (rowIndex) {
    //     case 0:
    //       return "warning-row";
    //     case 1:
    //       return "success-row";
    //     case 2:
    //       return "danger-row";
    //     case 3:
    //       return "green-row";
    //     case 4 :
    //     return "skyblue-row";
    //   }
    //   return "green-row"
    },
  },
  components: {},
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #fce3f3;
}
.el-table .danger-row {
  background: #fad6d6;
}
.el-table .skyblue-row {
  background: #d0ddee;
}
.el-table .green-row {
  background: #d0eed5;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: aquamarine !important
}
</style>